<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Registration</title>
<link rel="stylesheet" href="resources/mytheme/css/style.css">
<script type="text/javascript">

function onload()
{

}

function comparePass()
{
	var p1 = document.getElementById("pw1");
	var p2 = document.regForm.pw2.value;
	if(p1.value == p2 && p1.value.length>7 && p1.value.length<17)
		return true;
	else
	{
		if (p1.value!==p2)
		alert("Passwords do not match!")
		else {
			alert("Password must be between 8 - 16 characters")
			}
		return false;			
	}
}

function removeChars(ename)
{
	var inputString = document.getElementById(ename).value;
	var pass1 = inputString.replace('\'','');
	var pass2 = pass1.replace('\'','');
	var pass3 = pass2.replace('\'','');
	document.getElementById(ename).value = pass3.replace('\"','');
}

</script>
</head>
<body onload="onload()">
<div id="header">
<div id="logo"><img src="resources/mytheme/Logo.png" alt="RentFlix"></div>
<div id="login"><a href="Login"><img src="resources/mytheme/login.png" alt="RentFlix"></a></div>
</div>

    <div id="header3">
<div id="logo2"><img src="resources/mytheme/logo2.png" alt="RentFlix"></div>
</div>

    <div id="registerbody">
    <center>
      
        <form:form action="register" name="regForm" onSubmit="return comparePass()" method="post" commandName="userForm" class="account-info">
            <table border="0">
                <tr>
                    <td colspan="2" ><p>Sign Up Below..</p></td>
                </tr>
                <tr>
                    <td><form:input path="firstName" id="fn" required="true" placeholder="First Name"required="true" title="First Name" maxlength="19" onblur="removeChars('fn')"/></td>
                     <td><form:input path="lastName" id="ln" required="true" placeholder="Last Name"required="true" title="Last Name" maxlength="19" onblur="removeChars('ln')"/></td>
                </tr>
                <tr>
                    <td><form:input type="email" id="email" path="email" required="true" placeholder="E-Mail" title="Email" maxlength="35" onblur="removeChars('email')"/></td>
                </tr>
                <tr>
                     <td><form:input path="username" id="username" required="true"  placeholder="User Name" title="Username" maxlength="16" onblur="removeChars('username')"/></td>
                  
                </tr>
                <tr>
                    <td><form:password id="pw1" path="password" required="true"  placeholder="Password" maxlength="16" title="Password"/></td>
                    <td><form:password id="pw2" path="" name="pw2" required="true"  placeholder="Re-Type Password" maxlength="16" title="Password"/></td>
                </tr>
                 <tr>
                  
                       <td><form:input path="address" id="address" required="true"  placeholder="Address" title="Address" maxlength="40" onblur="removeChars('address')"/></td>
                </tr>
                <tr>
                  <td><form:input path="city" id= "city" required="true" placeholder="City"title="City" maxlength="35" onblur="removeChars('city')"/></td>
                     
                </tr>
                <tr>
                  
                      <td><div class="styled-select"><form:select  path="state">
					  <option value="AL"> Alabama</option>
					  <option value="AK"> Alaska</option>
					  <option value="AZ"> Arizona</option>
					  <option value="AR"> Arkansas</option>
					  <option value="CA"> California</option>
					  <option value="CO"> Colorado</option>
					  <option value="CT"> Connecticut</option>
					  <option value="DE"> Delaware</option>
					  <option value="FL"> Florida</option>
					  <option value="GA"> Georgia</option>
					  <option value="HI"> Hawaii</option>
					  <option value="ID"> Idaho</option>
					  <option value="IL"> Illinois</option>
					  <option value="IN"> Indiana</option>
					  <option value="IA"> Iowa</option>
					  <option value="KS"> Kansas</option>
					  <option value="KY"> Kentucky</option>
					  <option value="LA"> Louisiana</option>
					  <option value="ME"> Maine</option>
					  <option value="MD"> Maryland</option>
					  <option value="MA"> Massachusetts</option>
					  <option value="MI"> Michigan</option>
					  <option value="MN"> Minnesota</option>
					  <option value="MS"> Mississippi</option>
					  <option value="MO"> Missouri</option>
					  <option value="MT"> Montana</option>
					  <option value="NE"> Nebraska</option>
					  <option value="NV"> Nevada</option>
					  <option value="NH"> New Hampshire</option>
					  <option value="NJ"> New Jersey</option>
					  <option value="NM"> New Mexico</option>
					  <option value="NY"> New York</option>
					  <option value="NC"> North Carolina</option>
					  <option value="ND"> North Dakota</option>
					  <option value="OH"> Ohio</option>
					  <option value="OK"> Oklahoma</option>
					  <option value="OR"> Oregon</option>
					  <option value="PA"> Pennsylvania</option>
					  <option value="RI"> Rhode Island</option>
					  <option value="SC"> South Carolina</option>
					  <option value="SD"> South Dakota</option>
					  <option value="TN"> Tennessee</option>
					  <option value="TX"> Texas</option>
					  <option value="UT"> Utah</option>
					  <option value="VT"> Vermont</option>
					  <option value="VA"> Virginia</option>
					  <option value="WA"> Washington</option>
					  <option value="WV"> West Virginia</option>
					  <option value="WI"> Wisconsin</option>
					  <option value="WY"> Wyoming</option>
					</form:select></div></td>
                </tr>
                 
                
                 <tr>
                    
                     <td><form:input  path="zip" placeholder="Zip Code" required="true" maxlength="9" title="Zip Code"/></td>
                </tr>
              
                <tr>
                    <td colspan="2" align="center"><input type="submit" value="Create Account" /></td>
                </tr>
            </table>
        </form:form>
        </center>
    </div>
     
<div id="footer">
<div id="foota">
<p>Get Help</p>
<ul>
  <li><a href="#">FAQ</a></li>
  <li><a href="#">Help Center</a></li>
  <li><a href="#">Account</a></li>
  <li><a href="#">Questions</a></li>
</ul>


</div>
<div id="footb"><p>Our Company</p>
<ul>
  <li><a href="#">About us </a></li>
  <li><a href="#">Reviews  </a></li>
  <li><a href="#">Jobs  </a></li>
  <li><a href="#">Terms of Use</a></li>
</ul>

</div>
<div id="footc"><p>Getting Started</p>
<ul>
  <li><a href="#">Free Trail Offer Details  </a></li>
  <li><a href="#"> Redeem Your Gift</a></li>
</ul>

</div>
</div>
</body>
</html>